<template>
<div :class="['at-tabs__nav-wrap', scrollable ? 'is-scrollable' : '' ]">
  <span v-if="scrollable" :class="['at-tabs__nav-prev', scrollable.prev ? '' : 'is-disabled' ]" @click="scrollPrev">
    <i class="at-icon-arrow-left"></i>
  </span>
  <span v-if="scrollable" :class="['at-tabs__nav-next', scrollable.next ? '' : 'is-disabled' ]" @click="scrollNext">
    <i class="at-icon-arrow-right"></i>
  </span>
  <div :class="['at-tabs__nav-scroll']" ref="navScroll">
    <div class="at-tabs__nav" ref="nav" :style="navStyle" v-for="(pane, index) in panes">
      <tab-bar :tabs="panes" v-if="!type"></tab-bar>
      <div :class="{
                    'at-tabs__item': true,
                    'is-active': pane.active,
                    'is-disabled': pane.disabled,
                    'is-closable': pane.isClosable || editable
                  }"
        ref="tabs" refInFor @click="(ev)=> { onTabClick(pane, pane.name || pane.index || index, ev)}">{{pane.$slots.label || pane.label}}<span v-if="pane.isClosable || editable" class="at-icon-close" @click="(ev)=> { onTabRemove(pane, ev)}"></span>
      </div>
    </div>
  </div>
</div>

</template>
<script>
    import TabBar from './tab-bar'
    import { addResizeListener, removeResizeListener } from './util'

    function noop () { }

    export default {
      name: 'TabNav',

      components: {
        TabBar
      },

      props: {
        panes: Array,
        currentName: String,
        editable: Boolean,
        onTabClick: {
          type: Function,
          default: noop
        },
        onTabRemove: {
          type: Function,
          default: noop
        },
        type: String
      },

      data () {
        return {
          scrollable: false,
          navStyle: {
            transform: ''
          }
        }
      },

      methods: {
        scrollPrev () {
          const containerWidth = this.$refs.navScroll.offsetWidth
          const currentOffset = this.getCurrentScrollOffset()

          if (!currentOffset) return

          let newOffset = currentOffset > containerWidth
            ? currentOffset - containerWidth
            : 0

          this.setOffset(newOffset)
        },
        scrollNext () {
          const navWidth = this.$refs.nav.offsetWidth
          const containerWidth = this.$refs.navScroll.offsetWidth
          const currentOffset = this.getCurrentScrollOffset()

          if (navWidth - currentOffset <= containerWidth) return

          let newOffset = navWidth - currentOffset > containerWidth * 2
            ? currentOffset + containerWidth
            : (navWidth - containerWidth)

          this.setOffset(newOffset)
        },
        scrollToActiveTab () {
          if (!this.scrollable) return
          const nav = this.$refs.nav
          const activeTab = this.$el.querySelector('.is-active')
          const navScroll = this.$refs.navScroll
          const activeTabBounding = activeTab.getBoundingClientRect()
          const navScrollBounding = navScroll.getBoundingClientRect()
          const navBounding = nav.getBoundingClientRect()
          const currentOffset = this.getCurrentScrollOffset()
          let newOffset = currentOffset

          if (activeTabBounding.left < navScrollBounding.left) {
            newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left)
          }
          if (activeTabBounding.right > navScrollBounding.right) {
            newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right
          }
          if (navBounding.right < navScrollBounding.right) {
            newOffset = nav.offsetWidth - navScrollBounding.width
          }
          this.setOffset(Math.max(newOffset, 0))
        },
        getCurrentScrollOffset () {
          const { navStyle } = this
          return navStyle.transform
            ? Number(navStyle.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1])
            : 0
        },
        setOffset (value) {
          this.navStyle.transform = `translateX(-${value}px)`
        },
        update () {
          const navWidth = this.$refs.nav.offsetWidth
          const containerWidth = this.$refs.navScroll.offsetWidth
          const currentOffset = this.getCurrentScrollOffset()

          if (containerWidth < navWidth) {
            const currentOffset = this.getCurrentScrollOffset()
            this.scrollable = this.scrollable || {}
            this.scrollable.prev = currentOffset
            this.scrollable.next = currentOffset + containerWidth < navWidth
            if (navWidth - currentOffset < containerWidth) {
              this.setOffset(navWidth - containerWidth)
            }
          } else {
            this.scrollable = false
            if (currentOffset > 0) {
              this.setOffset(0)
            }
          }
        }
      },

      updated () {
        this.update()
      },
      mounted () {
        addResizeListener(this.$el, this.update)
      },

      beforeDestroy () {
        if (this.$el && this.update) removeResizeListener(this.$el, this.update)
      }
    }
</script>